<template>
    <div>
      <swiper auto height="240px" :show-desc-mask="false">
        <swiper-item class="swiper-demo-img"  v-for="(item, index) in swiperList" :key="index">
          <img :src="item" class="swiper-img">
        </swiper-item>
      </swiper>
      <div class="good-info" v-if="goodInfo">
        <h3 class="good-info-price"><span style="font-size:12px;">¥</span>{{specPrice ||goodInfo.goodsPrice}}</h3>
        <h2 class="good-info-name">{{goodInfo.goodsName}}</h2>
        <flexbox class="good-info-sub">
          <flexbox-item>库存状态：{{totalStock>0 ? '有库存':'无库存'}}</flexbox-item>
        </flexbox>
        <div class="good-info-import">
          <p>服务</p>
          <div class="right">服务7天无理由退款 / 72小时内发货</div>
        </div>
        <div class="good-info-import right-arrow">
          <p>选择</p>
          <div class="right" @click="dialog=true">
            <span v-text="specText"></span>
          </div>
        </div>
        <flexbox class="good-info-buy" >
          <flexbox-item >
            <inline-x-number v-model="goodsNum" width="50px"></inline-x-number>
          </flexbox-item>
          <flexbox-item span="100">
            <x-button class="buy-btn" @click.native="buyBtn">立即购买</x-button>
          </flexbox-item>
        </flexbox>
        <tab class="good-tab"  default-color="#161616" active-color="#42a5f5">
          <tab-item selected  @on-item-click="onItemClick">商品介绍</tab-item>
          <tab-item @on-item-click="onItemClick">商品评价</tab-item>
        </tab>
      </div>
      <template v-if="goodInfo">
        <img  v-for="(v,i) in goodInfo.goodsImgUrl.split('|')" :key="i" :src="v" width="100%">
      </template>


      <m-dialog v-model="dialog" @onConfirm="setSpec">
        <div class="spec-item vux-1px-b">
          <h5>颜色</h5>
          <checker v-model="selectSpecType" default-item-class="checker" selected-item-class="checker-selected" v-if="goodInfo" >
            <checker-item :value="item" v-for="(item, index) in specTypeList" :key="index" >{{item}}</checker-item>
          </checker>
        </div>
        <div class="spec-item vux-1px-b">
          <h5>尺寸</h5>
          <checker v-model="selectSpec" default-item-class="checker" selected-item-class="checker-selected" v-if="goodInfo" >
            <checker-item :value="item" v-for="(item, index) in specList" :key="index" >{{item}}</checker-item>
          </checker>
        </div>


      </m-dialog>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import { Swiper,SwiperItem } from 'vux'
    import MDialog from '../components/dialog.vue'
    export default {
        name: "good-detail",
        components:{
          Swiper,
          SwiperItem,
          MDialog,
        },
        data(){
          return {
            code:this.$route.query.code,
            goodsId:this.$route.query.goodsId || sessionStorage.getItem('goodsId') ,
            supplierId:this.$route.query.supplierId,
            specText:'请选择尺码',
            dialog:false,
            selectSpecType:'',
            selectSpec:'',
            goodsNum:1,
            specList:[],
            specPrice:'',
            specId:''
          }
        },
        watch:{
          selectSpecType(newValue){
            this.goodsSpecList.map(v=>{
              if(v.specType === newValue){
                this.specPrice = v.price
                this.specId = v.specId
                this.specList = v.spec.split('|')
              }
            })

          }

        },
        computed:{
          goodInfo(){
            return this.$store.state.good.goodInfo
          },
          swiperList(){
            return this.$store.state.good.swiperList
          },
          totalStock(){
            return this.$store.state.good.totalStock
          },
          goodsSpecList(){
            return this.$store.state.good.goodsSpecList
          },
          specTypeList(){
            return this.goodsSpecList.map(v=>v.specType)
          },


        },
        methods:{
          ...mapActions([
            'queryGetOpenId', // 映射 this.increment() 到 this.$store.dispatch('increment')
            'queryGetGoodInfo',
          ]),
          setSpec(){
            if(!this.selectSpecType || !this.selectSpec){
              this.$vux.toast.show({
                type:'text',
                text: '请选择购买规格',
                width:'180px'
              })
              return
            }
            this.dialog = false
            this.specText = `已选“${this.selectSpecType}”“${this.selectSpec}”`



          },
          buyBtn(){
            if(!this.selectSpecType || !this.selectSpec){
              this.$vux.toast.show({
                type:'text',
                text: '请选择购买规格',
                width:'180px'
              })
            }else if(this.goodsNum===0){
              this.$vux.toast.show({
                type:'text',
                text: '请选择购买数量',
                width:'180px'
              })
            }else{
              let  buyInfo = {
                goodsNum: this.goodsNum,
                specType:this.selectSpecType,
                spec:this.selectSpec,
                specPrice:this.specPrice,
                specId:this.specId,

              }

              sessionStorage.setItem('buyInfo',JSON.stringify(buyInfo))
              this.$router.push({name:'GoodBuy'})

            }
          },
          onItemClick(){

          }
        },
        created(){
          sessionStorage.setItem('goodsId',this.goodsId)
          if(!sessionStorage.getItem('openId')){
            this.queryGetOpenId(this.code)
          }
          if(!this.goodInfo){
            this.$vux.loading.show()
            this.queryGetGoodInfo(this.goodsId).catch(e=>{
              console.log(e)
            }).finally(()=>{
              this.$vux.loading.hide()
            })
          }
        }
    }
</script>

<style scoped>
.swiper-img{
  width: 100%;
}
.good-info{
  padding:0 4% 30px;
}
 .good-info-name{
   font-size: 16px;
   color:#1a1a1a
 }
.good-info-price {
  font-size: 21px;
  line-height: 40px;
  color:#f04b3e
}
  .good-info-sub{
    color:#919191;
    font-size: 12px;
    margin-bottom: 15px;
  }
  .good-info-import{
  position: relative;
    display: flex;
    padding-top: 12px ;
  }
  .good-info-import p{
    margin-right: 2%;
    color:#919191;
  }
    .good-info-import .right{
      flex:1;
    }
    .checker{
      background-color:#e6e6e6;
      border: 1px solid #e6e6e6;
      color:#747474;
       border-radius: 5px;
       padding:1% 3.5%;
       margin-right: 4%;
    }

    .checker-selected{
      background-color:#fff;
      color:#42a5f5;
      border-color: #42a5f5;
    }
    .spec-item{
      padding-bottom: 15px;
    }
    .spec-item h5{
      color:#161616;
      line-height: 40px;
    }
    .buy-btn{
      line-height: 35px;
      height: 35px;
      font-size: 16px;
    }
    .good-info-buy{
      margin-top: 30px;
      align-items:flex-start!important;
    }
    .tab-active{
      color:#42a5f5
    }
    .good-tab{
      width:60%

    }
    .good-tab .vux-tab-item{
      background: none;
    }
</style>
